<template>
    <div class="hcontent">
        <div class="all_shop">
            <router-link :to="'shopdetails/'+item.id" tag="div" class="a_shop" v-for="item in shop" :key="item.id" @click="jump(item.i)">
           
                <img :src="item.img_url" alt="">
                <h5 class="img_title">{{item.title}}</h5>
                <div class="bg">
                    <p class="money"><span class="new">￥{{item.sell_price}}</span><span class="old">{{item.market_price}}</span> </p>
                    <p class="stock"><span>热卖中</span> <span>剩余{{item.stock_quantity}}件</span></p>
                </div>
    
            </router-link>
             <mt-button size="large"  style="margin-top: 10px;" type="danger" @click.native="handleClick">更多</mt-button>
        </div>
       
    </div>
</template>
<script>
export default {
    data(){
        return {
            shop:[],
            page:1,
            isShop:true// 判断是否有商品
        }
    },
    methods:{
         async getallshop(){
           const {data} =await this.axios.get("/api/getgoods?pageindex="+this.page);
           if(data.status===0){
               if(data.message.length<=0){
                   this.isShop=false;
                   return;
               }
               this.shop=this.shop.concat(data.message);
           }
        },
        handleClick(){
                if(this.isShop){
                    this.page++;
                     this.getallshop();
                }
                
        }
    },
    created(){
        this.getallshop();
    }   
}
</script>
<style scoped>
.hcontent h5{
    color: #000;
}
.all_shop{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 7px 20px 7px;
    flex-wrap: wrap;
}
.a_shop{
    width: 49%;
    border: 1px solid #ccc;
    margin-top: 7px;
    box-shadow: 0 0 7px #ccc;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
img{
    width: 100%;
    min-height: 170px;
}
.img_title {
    font-size: 14px;
    font-weight: bold;
}
.new{
    color: red;
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold
}
.old{
    text-decoration: line-through;
    font-size: 12px;
}
.stock{
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
p{
    margin: 3px;
    
}
.bg{
    background-color: #eee;
    overflow: hidden;
}
</style>